<template>
    <el-card>
        <div v-loading="loading" >
            <div v-if="projectList.length" class="list">
                <el-table :data="projectList" style="width: 100%" stripe lazy highlight-current-row
                          :row-key="row => row.id">
                    <el-table-column fixed type="index" label="序号" width="75px" align="center"/>
                    <el-table-column prop="name" label="名称" width="auto" align="center"/>
                    <el-table-column prop="reimbursementLimit" label="报销额度" width="auto" align="center"/>
                    <el-table-column fixed="right" width="100px" align="right">
                        <template #default="{row}">
                            <el-button bg type="primary" size="small" @click.native.stop="receiptManage(row)" column-key>管理发票</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-empty v-else :image-size="200"/>
        </div>
        <Pagination :total="total" v-model:currentPage="currentPage" v-model:pageSize="pageSize"
                    v-model:projectList="projectList" v-model:loading="loading"/>
    </el-card>
</template>

<script setup>
import {onMounted, ref} from 'vue'


import router from "@/router";
import {useUserStore} from "@/stores/user";
import {getProjectListByHostApi} from "@/apis/project";
import Pagination from "@/views/User/Receipt/components/Pagination.vue";

const userStore = useUserStore()


//分页信息
let total = ref(0)
let currentPage = ref(1)
let pageSize = ref(10)

//项目列表
let loading = ref(true)
let projectList = ref([]);

//获取项目列表数据
const getProjectList = () => {
    getProjectListByHostApi(currentPage.value,pageSize.value).then(
        res => {
            projectList.value = res.data.records
            total.value = res.data.total
            loading.value = false
        }
    )
}

const receiptManage = row => {
    const {href} = router.resolve({
        name: "receiptManage",
        params: {id: row.id}
    })
    window.open(href, "_blank")
}
onMounted(()=>getProjectList())
</script>

<style scoped>
.list {
    margin-bottom: 1em;
}
</style>